<template>
    <section id="foot_wrap" class="foot_wrap">
        <router-link exact active-class="active" tag="div" class="foot_item" :to="{ path: '/'}" append>
            <i class="iconfont icon_home fl"></i>
            <span>首页</span>
        </router-link>
        <!-- <router-link tag="div"  class="foot_item" :to="{ path: '/user'}" append>
            <i class="iconfont icon_user fl"></i>
            <span>我的</span>
        </router-link> -->
        <router-link active-class="active" tag="div"  class="foot_item" :to="{ path: '/order'}" append>
            <i class="iconfont icon_profile fl"></i>
            <span>订单</span>
        </router-link>
        <router-link active-class="active" tag="div"  class="foot_item" :to="{ path: '/user'}" append>
            <i class="iconfont icon_user fl"></i>
            <span>我的</span>
        </router-link>
    </section>
</template>

<script>

export default {
  data() {
    return {};
  },
  methods: {
    gotoAddress(path) {
      this.$router.push(path);
    }
  },
  components: {}
};
</script>

<style scoped lang="css">
.foot_wrap {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  padding: 5px 0;
  background: #fff;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.foot_item {
  flex: 1;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.foot_item i {
  font-size: 24px;
  color: #bbb;
}
.foot_item.active i,.foot_item.active span{
  color: red;
}
.foot_item span {
  font-size: 12px;
  color: #666;
}
</style>
